<template lang="html">
  <section class="fd-wrapper" :class="{padding: padding}">
    <div class="fd-title-wrapper">
      <div class="title" @click.stop="toggle">
        <i :class="[visible ? 'el-icon-caret-bottom' : 'el-icon-caret-right']" class="" v-if="!disabled"></i>
        {{message}}
      </div>
      <div class="right-wrapper" v-show="visible">
        <slot name="header"></slot>
      </div>
    </div>
    <collapse-transition>
      <div v-show="visible" class="fd-content" ref="fdContent">
        <slot name="content"></slot>
        <slot></slot>
      </div>
    </collapse-transition>
    <div v-if="bottom" class="hr"></div>
  </section>
</template>

<script>
import {CollapseTransition} from 'element-ui'
export default {
  data () {
    return {
      icon: 'fa-angle-double-down',
      visible: this.show
    }
  },
  components: {
    CollapseTransition
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    title2: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: true
    },
    bottom: {
      type: Boolean,
      default: true
    },
    padding: Boolean,
    disabled: Boolean
  },
  computed: {
    message () {
      return this.visible ? this.title : (this.title2 || this.title)
    }
  },
  watch: {
    show () {
      this.visible = this.show
    }
  },
  methods: {
    toggle () {
      if (this.disabled) return
      this.visible = !this.visible
      this.$emit('toggleData', this.visible)
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss">
  .fd-wrapper{
    padding: 17px 20px 0px;
    background: white;
    .fd-title-wrapper{
      padding-bottom: 10px;
      display: flex;
      height: 30px;
      align-items: center;
      .title{
        font-size: 15px;
        color: #333;
        cursor: pointer;
        i{
          cursor: pointer;
          margin-right: 5px;
          color: #1F8EFA;
        }
      }
      .right-wrapper{
        flex: 1;
        text-align: right;
        button{
          vertical-align: top;
          color: #999;
        }
      }
    }
    .fd-content{
      /*overflow: hidden;*/
    }
    .hr{
      padding-top: 10px;
      border-bottom: 1px solid #e7e7e7;
    }
  }
  .fd-wrapper.padding{
    padding: 17px 0px 0px;
  }

</style>
